<template>
	<div id="make">
		<div class="make-title">
			预约信息
		</div>
		<!--alert-->
		<div>
			<alert v-model="alertShow" :title="alertTitle" @on-show="onShow" @on-hide="onHide"> {{alertInner}}</alert>
		</div>
		<!--loaing-->
		<div>
			<loading :show="loadingShow" :text="loadingText"></loading>
		</div>
		<div class="make-group">
			<group>
				<popup-picker :popup-title="('选择预约日期')" :title="title1" :data="list1" @on-show="onShow" @on-hide="onHide" @on-change="onChange1" :placeholder="input1"></popup-picker>
			</group>
			<group>
				<popup-picker :popup-title="('选择预约时间')" :title="title2" :data="list2" @on-show="onShow" @on-hide="onHide" @on-change="onChange2" :placeholder="input2"></popup-picker>
			</group>
			<div class="sfz">
				<span>身份证号</span>
				<input :class="{err:sfzisShow}" maxlength="18" @input="regsfz" v-model="regsfz1" type="text" placeholder="请填写身份证号" />
			</div>
			<div class="sfzhDiv" v-show="sfzShow">
				身份证有误！请重新输入...
			</div>
		</div>
		<div class="make-title">
			拖动滑块完成拼图
		</div>
		<div class="huakuai">
			<div class="huakuaiInner">
				<div id="mpanel4"></div>
			</div>

		</div>
		<!--预约按钮-->
		<div class="suessBtn">
			<button :class="{success:subm1&&subm2&&subm3&&subm4}" :disabled="!(subm1&&subm2&&subm3&&subm4)" @click="submitYY">确定预约</button>
		</div>

	</div>

</template>

<script>
	import PopupPicker from 'vux/src/components/popup-picker/index.vue'
	import Group from 'vux/src/components/group/index.vue'
	import Alert from 'vux/src/components/alert/index.vue'
	import Loading from 'vux/src/components/loading/index.vue'

	export default {

		components: {
			PopupPicker,
			Group,
			Alert,
			Loading

		},
		created() {
			document.title = '预约';
			let local = localStorage.getItem("sfzh");
			if(local) {
				this.regsfz1 = local;
				this.subm4 = true;
			} else {
				this.subm4 = false;

			}
		},
		mounted() {
			let $this = this;
			this.getTime();
			this.$nextTick(function() {
				$('#mpanel4').slideVerify({
					type: 2, //类型
					vOffset: 5, //误差量，根据需求自行调整
					vSpace: 5, //间隔
					imgName: ['1.png', '2.png', '3.png', '4.png', '5.png'],
					imgSize: {
						width: '100%',
						height: '200px',
					},
					blockSize: {
						width: '40px',
						height: '40px',
					},
					barSize: {
						width: '100%',
						height: '40px',
					},
					ready: function() {},
					success: function(obj) {
						$this.token = obj.token;
						$this.subm3 = true;
						/*$this.$ajax.post("/xzjh/tokenValidation", {
							token: $this.token
						}, function(res) {
							this.loadingShow = true;
							console.log(res)
							if(res.state) {
								this.loadingShow = false;
								this.sub3 = true;
							} else {
								this.loadingShow = false;
								this.alertTitle = "验证码";
								this.alertInner = "对不起，验证错误！"
								this.alertShow = true;
								this.sub3 = false;
							}
						}, "json")*/
					},
					error: function() {}

				});

			})

		},
		methods: {
			onChange1(val) {
				this.input1 = val[0];
				this.$ajax.post("/xzjh/appointmentDate", {
					appointDateTime: val[0]
				}).then((res) => {
					this.loadingShow = true;
					if(res.data.message != null || res.data.message != undefined) {
						this.loadingShow = false;
						this.alertTitle = "请求出错";
						this.alertInner = res.data.message;
						this.alertShow = true;
						this.subm1 = false;
					} else {
						this.subm1 = true;
						this.loadingShow = false;
						this.list2 = [];
						let arr = res.data.attachObjectEx;
						let list = [];
						/*判断input2里面的余数是否大于0*/
						let tempList = [];
						for(let i = 0; i < arr.length; i++) {
							let str = `${arr[i].begin_time}-${arr[i].end_time}余(${arr[i].available_quantity})个`;
							tempList.push(arr[i].available_quantity)
							list.push(str);
						}
						let falg = tempList.some(function(value) {
							return value > 0
						})
						if(falg) {
							this.subm2 = true;
						} else {
							this.subm2 = false;
							this.alertTitle = "人数已满";
							this.alertInner = "对不起，预约人数已满，请选择其他时间";
							this.alertShow = true;
						}
						this.input2 = list[0];
						this.list2.push(list);
					}

				})
			},
			onChange2(val) {

				this.input2 = val[0];
			},
			onShow() {

			},
			onHide(type) {

			},
			regsfz() {
				
				/*let lastNum = this.regsfz1.substring(this.regsfz1.length - 1, this.regsfz1.length);*/
				
				if(this.regsfz1.length == 15){
					let reg = /(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)/ig
					if(!reg.test(this.regsfz1)) {
						this.sfzisShow = true;
						this.subm4 = false;
						this.sfzShow = true;
					} else {
						/*存身份证号*/
						localStorage.setItem("sfzh", this.regsfz1)
						this.sfzisShow = false;
						this.subm4 = true;
						this.sfzShow = false;
					}
				}else{
					let newNum = this.isCnNewID(this.regsfz1);
					
					if(newNum) {
						/*存身份证号*/
						localStorage.setItem("sfzh", this.regsfz1)
						this.sfzisShow = false;
						this.subm4 = true;
						this.sfzShow = false;
					} else {
						this.sfzisShow = true;
						this.subm4 = false;
						this.sfzShow = true;
					}
				}
				
					
			

				/*		//let reg = /(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$)|(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)/;
						if(!reg.test(this.regsfz1)) {
							
						} else {
							

						}*/
			},
			isCnNewID(cid) {
				var arrExp = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; //加权因子  
				var arrValid = [1, 0, "X", 9, 8, 7, 6, 5, 4, 3, 2]; //校验码  
				if(/^\d{17}\d|x$/i.test(cid)){ 
					let sum = 0,
						idx;
					for(let i = 0; i < cid.length - 1; i++) {
						// 对前17位数字与权值乘积求和  
						sum += parseInt(cid.substr(i, 1), 10) * arrExp[i];
					}
					// 计算模（固定算法）  
					idx = sum % 11;
					// 检验第18为是否与校验码相等  
					return arrValid[idx] == cid.substr(17, 1).toUpperCase();
				} else {
					return false;
				}
			},
			getTime() {
				this.$ajax.post("/xzjh/resDate").then((res) => {

					if(res.data.message != null || res.data.message != undefined) {
						this.loadingShow = false;
						this.alertTitle = "请求出错";
						this.alertInner = res.data.message;
						this.alertShow = true;
						this.subm1 = false;
					} else {
						let arr = res.data.attachObjectEx;
						let list = [];
						for(let i = 0; i < arr.length; i++) {
							list.push(arr[i]);
						}
						this.list1.push(list);
						this.input1 = list[0];
					}

					if(this.input1) {
						this.$ajax.post("/xzjh/appointmentDate", {
							appointDateTime: this.input1
						}).then((res) => {
							this.loadingShow = true;
							if(res.data.message != null || res.data.message != undefined) {
								this.loadingShow = false;
								this.alertTitle = "请求出错";
								this.alertInner = res.data.message;
								this.alertShow = true;
								this.subm1 = false;
							} else {
								this.subm1 = true;
								this.loadingShow = false;
								this.list2 = [];
								let arr = res.data.attachObjectEx;
								let list = [];
								/*判断input2里面的余数是否大于0*/
								let tempList = [];
								for(let i = 0; i < arr.length; i++) {
									let str = `${arr[i].begin_time}-${arr[i].end_time}余(${arr[i].available_quantity})个`;
									tempList.push(arr[i].available_quantity)
									list.push(str);
								}
								let falg = tempList.some(function(value) {
									return value > 0
								})
								if(falg) {
									this.subm2 = true;
								} else {
									this.subm2 = false;
									this.alertTitle = "人数已满";
									this.alertInner = "对不起，预约人数已满，请选择其他时间";
									this.alertShow = true;
								}
								this.input2 = list[0];
								this.list2.push(list);
							}
						})
					}
				})

			},
			submitYY() {

				/*提交预约*/
				this.input2code = encodeURI(this.input2)
				let code1 = localStorage.getItem("sfzh");
				/*if(!this.subm4){
					this.alertTitle = "验证错误";
					this.alertInner = "身份证信息没有通过"
					this.alertShow = true;
				}
				if(!this.token) {
					this.alertTitle = "验证错误";
					this.alertInner = "对不起，滑块验证没有通过"
					this.alertShow = true;
				}*/
				if(this.subm1 && this.subm2 && this.subm3 && this.subm4) {
					this.disShow = false;
					this.loadingShow = true;
					this.$ajax.post("/xzjh/newAppointment", {

						appointDateTime: this.input1,
						code: code1,
						token: this.token,
						dateTime: this.input2code

					}).then((res) => {
						this.loadingShow = false;
						window._this.refresh();
						if(res.data.message != null || res.data.message != undefined) {
							this.alertTitle = "错误";
							this.alertInner = res.data.message;
							this.alertShow = true;

						} else {
							localStorage.setItem("sfzh", this.regsfz1);
							let isNow = res.data.description;
							if(isNow != null && isNow != undefined) {
								this.alertTitle = "错误";
								this.alertInner = isNow;
								this.alertShow = true;
								this.subm3 = false;

							} else {
								this.$router.replace({
									path: "/lineup"
								})
							}
						}

					})
				}
				/* else {
									this.alertTitle = "错误";
									this.alertInner = "对不起！部分信息验证错误！请检查";
									this.alertShow = true;
								}*/

			}
		},
		data() {
			return {
				title1: '预约日期',
				title2: '预约时间',
				list1: [],
				list2: [],
				input1: "请选择预约日期",
				input2: "请选择预约日期",
				input2code: "",
				/*身份证号*/
				regsfz1: "",
				sfzisShow: false,
				token: "",
				/*alert框*/
				alertShow: false,
				alertTitle: "",
				alertInner: "",
				/*loading*/
				loadingShow: false,
				loadingText: "加载中...",
				/*提交按钮判断变量*/
				subm1: false,
				subm2: false,
				subm3: false,
				/*身份证*/
				subm4: false,

				/*身份证验证框数据*/
				sfzShow: false,

			}
		}
	}
</script>
<style lang="scss">
	#make {
		.make-title {
			width: 100%;
			height: 44px;
			background-color: #efeff4;
			color: #888;
			font-size: 14px;
			display: flex;
			align-items: center;
			padding-left: 20px;
			box-sizing: border-box;
		}
		.weui-cell__ft:after {
			display: none;
		}
		.make-group {
			.vux-no-group-title {
				margin-top: 0;
			}
			.vux-popup-picker-select {
				text-align: left!important;
				margin-left: 25px;
			}
			.vux-cell-box:before {
				border-top: none!important;
			}
			.weui-cells:before {
				border-top: none!important;
				border-bottom: none!important;
			}
			.vux-popup-picker-placeholder {
				color: #000;
			}
			.sfz {
				/*身份证*/
				padding: 10px 15px;
				display: flex;
				align-items: center;
				span {
					flex: 68px 0 0;
					font-size: 17px;
					line-height: 20px;
				}
				input[type="text"] {
					flex: 1;
					padding-left: 25px;
					border: none;
					display: block;
					font-size: 17px;
					color: #000;
					&::-webkit-input-placeholder {
						color: #999999;
					}
					&.err {
						color: red;
					}
				}
			}
			.sfzhDiv {
				height: 30px;
				line-height: 30px;
				color: red;
				padding-left: 110px;
				font-size: 13px;
				box-sizing: border-box;
			}
		}
		.huakuai {
			padding: 20px 16px;
			margin: 0 auto;
			box-sizing: border-box;
			.huakuaiInner {
				width: 6.8rem;
				#mpanel4 {
					width: 6.8rem!important;
				}
			}
		}
		.suessBtn {
			padding: 0 20px 20px 20px;
			box-sizing: border-box;
			button {
				width: 100%;
				height: 44px;
				line-height: 44px;
				color: #fff;
				text-align: center;
				background-color: #999;
				border-radius: 4px;
				font-size: 18px;
				&.success {
					background-color: #166AD2;
				}
			}
		}
	}
</style>